// 封装一个ajax发请求工具库,类似于jq的$.ajax
const $ = {
    // 对参数作处理，如果传进来的是对象，则要作处理返回key=value&key=value的形式
    exchangeData: function (data) {
        let arr = [] //定义一个空数组
        for (let key in data) {
            arr.push(`${key}=${data[key]}`)  //把传进来的对象的每一项遍历出来加到arr中
        }
        // console.log(arr);
        return arr.join('&')  // 用&拼接每一项，最后返回
    },
    // option是传进来的对象，里面的属性顺序可以不一样
    // 传入的参数应该有请求方式，请求地址，数据，回调函数，返回响应的数据类型
    ajax: function (option) {
        // 对传入的参数对象作处理
        // 获取传入对象的请求方式做判断
        let type = option.type || 'get'   //如果有声明type就是type的请求方式，没有就是默认get
        // 获取传入对象的url，这是一个必须参数，如果没有传进来，则报错，并中止请求
        let url = option.url  //请求地址是必须的，没有的话就报错
        if (!url) {
            alert('请传入url')
            return
        }
        // 获取传入的数据，并对数据作处理，如果是对象，需要转换为key=value&key=value的形式，封装一个数据转换函数，调用
        let data = option.data
        // console.log(data);
        if (data && typeof data === 'object') data = $.exchangeData(data)
        // 获取传入的success回调函数
        let success = option.success
        // 获取传入的dataType参数
        let datatype = option.dataType || ''

        // 创建一个异步对象
        let xhr = new XMLHttpRequest()
        // 发送请求
        // 要进行判断，是get还都是post方式
        // get方式，带参请求的话，要进行url拼接
        if (type.toLowerCase() === 'get' && data) {
            url = url + '?' + data // 如果是get方式，有参数，要进行url拼接
            data = null
        }
        // 请求设置
        xhr.open(type, url)
        // post方式，需要设置请求头
        if (type.toLowerCase() === 'post') {
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        }
        // 发送请求，带参数，如果是get，则是send（null），post则需要传参数
        xhr.send(data)
        // 响应请求
        xhr.onload = function () {
            let res = null
            // 判断传进来的datatype类型，根据不同类型返回不同格式的结果
            if (datatype.toLowerCase() === 'json') {
                res = JSON.parse(xhr.response)
            } else if (datatype.toLowerCase() === 'xml') {
                res = xhr.responseXML
            } else {
                res = xhr.response
            }
            success && success(res) // 有成功的回调函数则调用
        }
    }
}